<template>
  <div class="related">
    <div class="related-header-container">
      <div class="jzt-flex-bt related-header">
        <div class="jzt-flex-start">
          <title-view title="商品定制模板" />
          <span style="color: #86909c; font-size: 12px"
            >（一个商品只能关联一个定制，可以在商品编辑时关联选择，也可以通过模板去关联商品）</span
          >
        </div>
        <el-button color="#F2F3F5" style="width: 134px" @click="handleCancel">返回上一页</el-button>
      </div>
    </div>
    <div class="jzt-flex-bt related-table">
      <div>
        <span>当前定制模板</span>
        <el-select v-model="customTemplateId" @change="handleChange" placeholder="请选择" style="width: 256px; margin-left: 16px">
          <el-option
            v-for="item in templateData"
            :key="item.customTemplateId"
            :label="item.templateName"
            :value="item.customTemplateId"
          />
        </el-select>
      </div>
      <div>
        <el-button type="primary" plain @click="handleAllEdit(null)">批量修改关联定制模板</el-button>
        <el-button type="primary" @click="handleAdd">添加关联商品</el-button>
      </div>
    </div>
    <div class="table-container" element-loading-text="数据加载中..." v-loading="isLoadingTable">
      <el-table
        ref="reformTableRef"
        :data="tableData"
        stripe
        style="width: 100%"
        border
        :header-cell-style="{ background: '#F2F6FC', color: '#4E5969', 'font-weight': 400, 'font-size': '14px' }"
        reserve-selection
        row-key="productId"
        @selection-change="selectionChange"
      >
        <el-table-column type="selection" reserve-selection width="55" fixed="left" />
        <el-table-column prop="" label="商品图" width="105">
          <template #default="{ row }">
            <img style="width: 80px; height: 80px" :src="row.mainPicUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="" label="商品信息" show-overflow-tooltip>
          <template #default="{ row }">
            <div style="color: #86909c">
              <div style="color: #007dff; line-height: 22px">{{ row.productName }}</div>
              <div>上架类目：{{ row.preview }}</div>
              <div>型号：{{ row.businessModelCode }}</div>
              <div>分类：{{ row.categoryName }}</div>
              <div>ID：{{ row.productId }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="商品状态" show-overflow-tooltip align="center">
          <template #default="{ row }">
            <Status :goods="row" />
          </template>
        </el-table-column>
        <el-table-column prop="" label="当前绑定定制模版" show-overflow-tooltip align="center" />
        <el-table-column prop="" label="操作" show-overflow-tooltip align="center">
          <template #default="{ row }">
            <span style="color: #409eff; cursor: pointer" @click="handleAllEdit(row)">修改模版设置</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination" v-if="tableData?.length > 0">
      <el-pagination
        v-model:current-page="tableParams.page"
        v-model:page-size="tableParams.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="getList"
        @current-change="getList"
      />
    </div>
    <!-- 删除   -->
    <el-dialog class="del-dialog" v-model="visible" title="Tips" width="500" :before-close="handleClose">
      <template #header>
        <title-view title="修改定制模版" />
      </template>
      <div class="dialog-container">
        <div class="dialog-container-tips">可将所有商品调整到其他定制模板中关联，或将商品移除模版关联，请根据自身业务调整！</div>
        <div class="dialog-container-input">
          <span class="label-name">当前定制模板</span>
          <div class="jzt-flex-start">
            <img
              @click="handleActive(item)"
              style="width: 14px; height: 14px"
              v-if="checkValue"
              src="@/assets/images/active.png"
              alt=""
            />
            <img @click="handleActive(item)" style="width: 14px; height: 14px" v-else src="@/assets/images/cancel.png" alt="" />
            <div style="margin-left: 8px">不支持定制（将商品移除定制模板）</div>
          </div>
        </div>
        <el-select v-model="editParams.customTemplateId" placeholder="选择定制模版" v-if="!checkValue">
          <el-option
            v-for="item in options"
            :key="item.customTemplateId"
            :label="item.templateName"
            :value="item.customTemplateId"
          />
        </el-select>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { nextTick, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addRelation, productList, templateList, templateListExclude } from "@/apis/products/shopConfig";
import Status from "@/components/Status/index.vue";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();

const options = ref([]);
const isLoadingTable = ref(false);
const visible = ref(false);
const tableData = ref([]);
const total = ref(0);
const templateData = ref([]);
const customTemplateId = ref("");
const tableHeight = ref(0);
const checkValue = ref(false);
const editParams = ref({
  productIds: [],
  customTemplateId: null
});
customTemplateId.value = route.query.customTemplateId;
const tableParams = ref({
  page: 1,
  size: 10,
  customTemplateId: customTemplateId.value
});
const getTemplateList = async customTemplateId => {
  const { data } = await templateList({ customTemplateId });
  templateData.value = data;
};
getTemplateList();
const init = () => {
  tableParams.value.page = 1;
  getList();
};
const handleChange = val => {
  tableParams.value.customTemplateId = val ? val : null;
  init();
};
// 排除自己的定制模板
const getTemplateListExclude = async customTemplateId => {
  const { data } = await templateListExclude({ customTemplateId });
  options.value = data;
};
const selectionChange = data => {
  editParams.value.productIds = data.map(v => v.productId);
};
// 批量修改
const handleAllEdit = row => {
  if (row) {
    editParams.value.productIds = [row.productId];
  } else if (editParams.value.productIds.length === 0) return ElMessage.error("请选择关联商品");
  editParams.value.customTemplateId = "";
  getTemplateListExclude(customTemplateId.value);
  visible.value = true;
};
// 批量修改确认
const handleConfirm = async () => {
  await addRelation(editParams.value);
  visible.value = false;
  init();
};
const setHeight = () => {
  nextTick(() => {
    tableHeight.value = document.documentElement.clientHeight - 342;
  });
};
setHeight();
const handleAdd = () => {
  router.push({ path: "/shopConfig/customization/related", query: { customTemplateId: customTemplateId.value } });
};
// 取消
const handleClose = () => {
  visible.value = false;
};
const handleActive = () => {
  checkValue.value = !checkValue.value;
  console.log(checkValue.value);
};
const handleCancel = () => {
  router.back();
};
const getList = async () => {
  const { data } = await productList(tableParams.value);
  tableData.value = data.records;
  total.value = data.total;
};
getList();
</script>
<style scoped lang="scss">
@import "index";
</style>
